<!-- 书本详情 -->
<template>
    <div class="review-body" @scroll="scrollLoad()" ref="review">
        <div class="review">
            <div class="review-top clearfix">
                <img :src="review.avatar ? review.avatar : $parent.headError" alt="" :onerror="$parent.headError" class="avatar left">
                <div class="info left">
                    <div class="name">{{review.trueName}}</div>
                    <div class="time">{{review.createTime}}</div>
                </div>
                <span @click="goComplain(0,review)" v-show="review.userId!=$parent.myInfo.UserId">投诉</span>
            </div>
            <div class="review-con">{{review.experienceContent}}</div>
            <!-- 图片 -->
            <ul class="img-lattice clearfix" v-if="review.pictureCollection">
                <li v-for="(img,i) in imgList" :key="i" :class="[{'lattice-box1':imgList.length==1},{'lattice-box2':imgList.length==2},{'lattice-box3':imgList.length>2}]">
                    <img :src="img"  alt="" @click="imgLook(img,i)">
                </li>
            </ul>
            <!-- 查看大图 -->
            <transition name="fade">
                <div class="mask-lookimg mask" v-show="lookImgShow" @click="lookImgClose()">
                    <img :src="lookImgSrc" alt="" :class="['lookimg-pic',{'vertical':isVertical}]">
                </div>
            </transition>
            <!-- 点赞 -->
            <div :class="[review.isPraise ? 'islike like' : 'like']" @click="likeClick(review)">点赞{{review.praiseCount}}</div>
            <!-- 评论 -->
            <div class="review-box">
                <div class="module-title">热门评论</div>
                <ul class="review-list">
                    <li v-for="(item,index) in commentList" :key="index">
                        <div class="li-top clearfix">
                            <img :src="item.avatar ? item.avatar : $parent.headError" alt="" :onerror="$parent.headError" class="left">
                            <i class="left">{{item.trueName}}</i>
                            <span class="right" v-show="item.userId==$parent.myInfo.UserId" @click="deleClick(item,index)">删除</span>
                        </div>
                        <div class="li-main">
                            <p>{{item.commentContent}}</p>
                        </div>
                        <div class="li-bottom clearfix">
                            <i class="left">{{item.createTime}}</i>
                            <span class="left" v-show="item.userId!=$parent.myInfo.UserId" @click="goComplain(1,item)">投诉</span>
                        </div>
                    </li>
                </ul>
                <transition name='fade'>
                    <div class="no-con small" v-show="noConShow">
                        <img src="@/assets/img/no-con.png" alt="">
                        <p>暂无评论...</p>
                    </div>
                </transition> 
                <div class="bottom-tips">{{bottomTip}}</div> 
            </div>
        </div>
        <!-- 编辑 -->
        <div class="edit-box clearfix">
            <div class="edit-input left">
                <input type="text" name="" id="" v-model="inputVal" maxlength="200" ref="edit-input" @focus="inputFocus()" @blur="inputBlur()" placeholder="说说你的看法">
                <span v-show="inputVal" @click="inputDel()" @mousedown="eventBlur($event)"></span>
            </div>
            <div :class="['btn-edit right',{'not-send':!inputVal}]" @click="sendComment()">发送</div>
        </div>
        <!-- 提示弹窗 -->
        <Popup v-show="popupShow" :popupShow="popupShow" :popupType="2" :popupText="popupText"  @popupCancel="popupCancel" @popupSure="popupSure"></Popup>
    </div>
</template>

<script>
import { imgLoad } from '@/assets/js/base'
import { axGet,axPost } from '@/api/index'
import Popup from '@/components/Popup'

export default {
    name: "bookDetail",
    components:{
        Popup,
    },
    data(){
        return{
            type:this.$parent.myInfo.UserType,//0学生，1教师
            userid:this.$parent.myInfo.UserId,
            bookid:this.$route.query.bookid,     //书本id
            reviewid:this.$route.query.reviewid, //书评id
            review:{},          //书评对象
            imgList:[],         //书评图片列表
            imgClass:'lattice-box3',   //图片样式
            lookImgShow:false,  //是否放大图片
            lookImgSrc:'',
            isVertical:false,   //大图样式
            commentList:[],     //评论列表
            inputVal:'',        //评论输入框
            complainType:-1,    //投诉
            complainItem:{},
            // 提示弹窗
            popupShow:false,
            popupText:'确定要投诉该评论吗？',
            // 分页
            noConShow:false,
            listPage:1,
            totalPage:1,
            bottomTip:'',
            isLoading:true,
        }
    },
    watch:{
        lookImgShow(newVal,oldVal){
            if(newVal){
                touchFalse() 
            }else{
                touchTrue()
            }
        },
    },
    created(){
        this.$parent.menuShow=false; 
       
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            this.review=JSON.parse(sessionStorage.getItem("thisReview"))
            // console.log(this.review)
            this.getComment(1)
        }
    },
    mounted(){
    },
    destroyed(){
        this.$parent.scoreShow=false;
        touchTrue()
    },
    methods:{
        //请求评论列表
        getComment(page){
            axGet('GetExperienceCommentList', {
                ExperienceId: this.reviewid,
                PageIndex: page,
                PageSize:5,
            }).then(res => {
                if(res.ResultCode==1){
                    let listJson=res.Value.list;
                    listJson.forEach((item,i)=>{ 
                        this.commentList.push(item)
                    })
                    if(page==1){
                        this.totalPage=res.Value.pageCount
                        this.commentList.length==0 ? this.noConShow=true : this.noConShow=false
                    }
                    if(page<this.totalPage){
                        this.bottomTip='上拉加载更多'
                    }else{
                        this.bottomTip=''
                    }
                    this.isLoading=true;
                }else{
                    this.isLoading=false; 
                }
            })
        },
        //投诉
        goComplain(type,item){
            this.complainType=type   //0 阅读心得   1评论
            this.complainItem=item
            this.popupShow=true
        },
        popupCancel(){
            this.complainType=-1   
            this.complainItem={}
            this.popupShow=false
        },
        popupSure(){
            this.postComplain()
            this.popupShow=false
            this.complainType=-1   
            this.complainItem={}
        },
        postComplain(){
            axGet('PostReport', {
                FromUserId: this.userid,
                ToUserId:this.complainItem.userId,
                ReportCategory:this.complainType,    //0 阅读心得   1评论
                ReportIdentity:this.complainType==0 ? this.complainItem.experienceId : this.complainItem.commentId, 
            }).then(res => {
                if(res.ResultCode==1){
                    if(res.Value){
                        this.$LayerTip({
                            content:"投诉成功",
                            time:1000,
                        });
                    }else{
                        this.$LayerTip({
                            content:"投诉失败",
                            time:1000,
                        }); 
                    }
                }
            }) 
        },
        //输入框
        sendComment(){
            let regu=/^\s*$/g;
            if(!this.inputVal || regu.test(this.inputVal)){
                this.$LayerTip({
                    content:"请输入内容",
                    time:1000,
                });
                this.inputVal='';
            }else{
               this.addComment();
            } 
        },
        //添加评论
        addComment(){
            let replyid=''  //回复
            axGet('PostExperienceComment', {
                userId:this.userid,
                bookid:this.bookid,
                ExperienceId:this.reviewid,
                // ParentId:replyid,
                CommentContent:this.inputVal,
            }).then(res => {
                if(res.ResultCode==1){
                    this.listPage=1
                    this.bottomTip=''
                    this.commentList=[]
                    this.getComment(1)

                    let isPostScore=sessionStorage.getItem("postScore4")
                    if(isPostScore && isPostScore=='true' || this.type==1){
                        this.$LayerTip({
                            content:"发送成功",
                            time:1500,
                        });
                    }else{
                        let score=Math.floor(Math.random()*(10-5+1)+5)
                        this.$parent.postScore(score,4,'留言发布成功')
                    }
                    
                    this.inputVal='';
                    

                }
            })
        },
        // 删除
        deleClick(item,index){
            axGet('DeleteExperienceComment', {
                UserId:this.userid,
                CommentId: item.commentId,
            }).then(res => {
                if(res.ResultCode==1 && res.Value){
                    this.$LayerTip({
                        content:"删除成功",
                        time:1000,
                    });
                    this.commentList.splice(index,1)
                }
            })
        },
        // 点赞
        likeClick(item){
            if(item.isPraise){
                this.removePraised(item)
            }else{
                this.addPraised(item)
            }
        },
        addPraised(item){
            axGet('PostPraise', {
                FromUserId: this.userid,
                ToUserId:item.userId,
                PraiseCategory:0,
                PraiseIdentity:item.experienceId, 
            }).then(res => {
                if(res.ResultCode==1){
                    item.isPraise=true;
                    item.praiseCount=parseInt(item.praiseCount)+1; 
                    sessionStorage.setItem("thisReview",JSON.stringify(item))

                }
            })
        },
        removePraised(item){//取消赞
            axGet('CancelPraise', {
                FromUserId: this.userid,
                ToUserId:item.userId,
                PraiseCategory:0,
                PraiseIdentity:item.experienceId, 
            }).then(res => {
                if(res.ResultCode==1){
                    item.isPraise=false;
                    item.praiseCount=parseInt(item.praiseCount)-1; 
                    sessionStorage.setItem("thisReview",JSON.stringify(item))
                }
            })
        },
        //删除按钮
        inputDel(){
            this.inputVal='';
            // this.$refs['edit-input'].value ='';
        },
        eventBlur(event){
            event.preventDefault();
        },
        inputFocus(){
            // touchFalse()
        },
        inputBlur(){
            window.scrollTo(0,0);
            // touchTrue()
        },
        //查看大图
        imgLook(img,i){
            this.lookImgShow=true;
            this.lookImgSrc=img;
            let imgDom=document.getElementsByClassName('lookimg-pic')[0]
            imgLoad(imgDom,()=> {
                let imgw=imgDom.naturalWidth;
                let imgh=imgDom.naturalHeight;
                let h=document.body.clientHeight;
                let w=document.body.clientWidth;
                // console.log(h/w) 
                if((imgh/imgw)>(h/w)){
                    // console.log('1:'+imgh/imgw)
                    this.isVertical=true;
                }else{
                    // console.log('2:'+imgh/imgw)
                    this.isVertical=false;
                }
                
                // console.log(imgDom.naturalHeight)
            })
        },
        lookImgClose(){
            this.lookImgShow=false;
            this.lookImgSrc='';
        },
        // // 九宫格图片列表
        // imgStyle(){
        //     this.newList.forEach(function(list,index){
        //         if(list.imgList.length==1){
        //             list.imgClass='lattice-box1';
        //         }else if(list.imgList.length==2){
        //             list.imgClass='lattice-box2';
        //         }else{
        //             list.imgClass='lattice-box3';
        //         }
        //     })
            
        // },
        // 滚动加载   
        scrollLoad(){
            // let bodyH = document.documentElement.clientHeight || document.body.clientHeight;
            let bodyH = this.$refs['review'].clientHeight;
            let scrollH = this.$refs['review'].scrollTop;
            let listH = this.$refs['review'].scrollHeight;
            console.log(bodyH,scrollH,listH)
            if(scrollH+bodyH+100>listH && this.isLoading){
                this.isLoading=false
                this.bottomTip='努力加载中...'
                // console.log(this.totalPage)
                this.listPage=this.listPage+1;
                if(this.listPage<this.totalPage || this.listPage == this.totalPage){
                    let page=this.listPage;
                    this.getComment(page)
                }else{
                    if(this.commentList.length>0){
                        this.bottomTip='到达世界的边缘咯...'
                        console.log('没有更多数据')
                    }else{
                        this.bottomTip=''; 
                    }
                    
                }
                
            }
            
        },
        
    }
}
</script>
<style type="text/css" scoped>
.review-body{
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.review{
    padding: 0.3rem 0.32rem 1.1rem;
}
.review-top{
    position: relative;
}
.review-top .avatar{
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #ebeef2;
}
.review-top .info{
    padding-left: 0.22rem;
}
.review-top .name{
    font-size: 0.34rem;
    line-height: 1;
    padding: 0.02rem 0 0.12rem;
    max-width: 4rem;
    white-space:nowrap; 
    overflow: hidden;
    text-overflow:ellipsis;
}
.review-top .time{
    color: #999;
    line-height: 1;
}
.review-top span{
    color: #999;
    position: absolute;
    bottom: 0;
    right: 0;
}
.review-con{
    font-size: 0.32rem;
    line-height: 0.52rem;
    padding: 0.4rem 0 0.2rem;
    letter-spacing:0.02rem;
    word-wrap: break-word;
    word-break: break-all;
}
.review-box{
    font-size: 0.3rem;
}
/* 输入框 */
.edit-box{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 100;
    background: #ebeef2;
    padding: 0.16rem 0.32rem 0.24rem;
    box-sizing: border-box; 
    font-size: 0.3rem;
} 
.edit-input{
    box-sizing: border-box;
    width: 80%;
    position: relative;
    padding: 0 0.64rem 0 0.4rem;
    background: #fff;
    border-radius: 0.4rem;
}
.edit-input input{
    font-size: 0.3rem;
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -khtml-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;/*手机浏览器的用户选择功能 */
    
} 
.edit-input input::-webkit-input-placeholder{
    color: #ccc;
}
.edit-input input::-moz-placeholder{
    color: #ccc;
}
.edit-input input:-moz-placeholder{
    color: #ccc;
}
.edit-input input:-ms-input-placeholder{
    color: #ccc;
}
.edit-input span{
    width: 0.6rem;
    height: 0.8rem;
    position: absolute;
    top: 0;
    right: 0;
    background:url(~@/assets/img/icon/clean.png) no-repeat 0 center;
    background-size: 0.32rem,0.32rem;
    opacity: 1;
} 
.not-send{
    opacity: 0.6;
}
.btn-edit{
    width: 17%;
    /* height: 0.8rem;
    line-height: 0.8rem; */
    line-height: 1;
    padding: 0.24rem 0;
    border-radius: 0.42rem;
    text-align: center;
    color: #fff;
    background: #02affe;
}    
.like{
    width: 2.3rem;
    padding-top: 1.42rem;
    background: url(~@/assets/img/icon/newlike-n.png) no-repeat center 0;
    background-size: 2.28rem 1.21rem;
    text-align: center;
    margin: 0.62rem auto 0.98rem;
    color: #999;
    font-size: 0.28rem;
}
.like.islike{
    background-image: url(~@/assets/img/icon/newlike-y.png);
}
</style>